<template>
  <div class="carousel5">
    <div class="container">
      <div v-fade-in class="carousel-title">生态产品</div>
      <M-button v-slide-up @click="handleDetail" />
      <el-carousel
        :autoplay="false"
        arrow="never"
        height="400px"
        indicator-position="outside"
        class="carousel-box"
      >
        <el-carousel-item
          v-for="(item, index) in data"
          :key="index"
          class="carousel-item-box"
        >
          <div v-for="(sub, k) in item" :key="k" class="carousel-item">
            <div class="carousel-bg">
              <img v-slide-plus :src="publicSrc(sub.cover)" />
              <div v-slide-up class="item-title">{{ sub.name }}</div>
              <div v-slide-up class="item-content">{{ sub.synopsis }}</div>
              <div v-slide-up class="f f-jc">
                <T-button
                  text="查看详情"
                  color="#000"
                  width="163"
                  height="53"
                  background="#fff"
                  border="0"
                  class="tbtn"
                  @click="handleDetail(sub)"
                />
              </div>
              <el-icon
                v-slide-up
                color="#fff"
                size="24"
                class="tbtn"
                @click="handleDetail(sub)"
              >
                <IEpRight />
              </el-icon>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <Product-dialog
      v-model="detailShow"
      :id="ecologyId"
      @comfirm="comfirmProduct"
      @close="closeDetail"
    />
    <Particles
      v-if="index === 4"
      pid="carousel5-particles"
      :max-size="3"
      :speed="3"
      :number="10"
      :link="false"
    />
  </div>
</template>
<script lang="ts" setup>
const router = useRouter();
import { publicSrc } from "@/utils/common";
defineProps({
  index: {
    type: Number,
    default: 0,
  },
  data: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
});

const detailShow = ref<boolean>(false); // 详情弹窗
const ecologyId = ref<any>(""); // 详情数据ID

// 跳转详情
const handleDetail = (item: any = {}) => {
  if (item.id) {
    ecologyId.value = item.id;
    detailShow.value = true;
  } else {
    router.push("/pc/ecology");
  }
};
// 咨询产品
const comfirmProduct = (info: any) => {
  router.push({
    path: "/pc/contact",
    query: {
      title: encodeURIComponent(`首页生态产品：${info.name}`),
    },
  });
};

// 关闭弹窗
const closeDetail = () => {
  ecologyId.value = "";
};
</script>
<style lang="scss" scoped>
.carousel5 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/home/carousel5.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .container {
    position: relative;
    height: 100%;
    .carousel-title {
      position: absolute;
      left: 0;
      top: 240px;
      font-size: 36px;
      width: 65%;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 96px;
      color: #fff;
      z-index: 4;
    }
    .more-btn {
      position: absolute;
      left: 1px;
      top: 340px;
    }
    .carousel-box {
      position: absolute;
      left: 0;
      bottom: 100px;
      width: 100%;
      z-index: 4;
      .carousel-item-box {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        .carousel-item {
          height: 400px;
          text-align: center;
          color: #000;
          .carousel-bg {
            width: 100%;
            height: 400px;
            background: rgba(255, 255, 255, 0.13);
            backdrop-filter: blur(15px);
            padding: 40px 30px;
            text-align: center;
            box-sizing: border-box;
            transition: all 0.5s;
            position: relative;
            &:hover {
              cursor: pointer;
              img {
                width: 0;
                height: 0;
                opacity: 0;
              }
              background: linear-gradient(
                to top,
                rgba(25, 91, 166, 0.86) 0%,
                rgba(42, 130, 228, 0) 100%
              );
              &::before {
                background: linear-gradient(
                  to right,
                  rgba(120, 183, 255, 0.5),
                  rgba(42, 130, 228, 0)
                );
              }
              &::after {
                background: linear-gradient(
                  to bottom,
                  rgba(120, 183, 255, 0.5),
                  rgba(42, 130, 228, 0)
                );
              }
              .item-title {
                margin-top: 0;
                &::before {
                  background: linear-gradient(
                    to right,
                    rgba(120, 183, 255, 0),
                    rgba(42, 130, 228, 0.5)
                  );
                }
                &::after {
                  background: linear-gradient(
                    to bottom,
                    rgba(120, 183, 255, 0),
                    rgba(42, 130, 228, 0.5)
                  );
                }
              }
              .tbtn {
                opacity: 1;
                margin-top: 42px;
              }
            }
            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 1px;
              transition: all 0.5s;
              background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0.5),
                rgba(255, 255, 255, 0)
              );
            }
            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 1px;
              height: 100%;
              transition: all 0.5s;
              background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.5),
                rgba(255, 255, 255, 0)
              );
            }
            img {
              width: 200px;
              height: 200px;
              opacity: 1;
              object-fit: cover;
              transition: all 0.5s;
            }
            .item-title {
              font-size: 20px;
              color: #fff;
              line-height: 28px;
              margin-top: 20px;
              transition: all 0.5s;
              &::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                transition: all 0.5s;
                background: linear-gradient(
                  to right,
                  rgba(255, 255, 255, 0),
                  rgba(255, 255, 255, 0.5)
                );
              }
              &::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 1px;
                height: 100%;
                transition: all 0.5s;
                background: linear-gradient(
                  to bottom,
                  rgba(255, 255, 255, 0),
                  rgba(255, 255, 255, 0.5)
                );
              }
            }
            .item-content {
              color: rgba(255, 255, 255, 0.6);
              transition: all 0.5s;
              font-size: 16px;
              display: -webkit-box;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              margin-top: 10px;
              line-height: 23px;
            }
            .tbtn {
              opacity: 0;
              margin-top: 0;
              transition: all 0.5s;
            }
          }
        }
      }
    }
  }
}
:deep(.el-carousel__indicators--outside) {
  margin-top: 50px;
}
:deep(.el-carousel__button) {
  height: 6px;
  width: 20px;
}
:deep(.is-active .el-carousel__button) {
  width: 40px;
}
</style>
